<template>
  <baseCard title="云资源信创情况"
            :height="height"
            :contentStyle="{ padding: '0.2rem', flexDirection: 'column' }">
    <div class="template-header">
      <div class="template-item"
           :class="defaultValue == 1 ? 'default-value' : 'template-item'">
        <div class="over-template-item-right">
          <div class="details-item">
            <label class="label">{{ "信创" }}</label>
            <span class="value">{{ addThousandsSeparator(overviewData[0]?.true_start) }}台</span>
          </div>
          <div class="template-item-a">
            <label class="label">{{ "麒麟" }}</label>
            <span class="value">
              {{ addThousandsSeparator(overviewData[0]?.kylin) }}台</span>
          </div>
          <div class="template-item-b">
            <label class="label">{{ "欧拉" }}</label>
            <span class="value">
              {{ addThousandsSeparator(overviewData[0]?.euler) }}台</span>
          </div>
        </div>
        <img src="@/pages/cloudResources/icon/xc.png"
             class="imgclass" />
      </div>
      <!-- <div class="template-item"
           :class="defaultValue == 2 ? 'default-value' : 'template-item'">
        <div class="over-template-item-right">
          <div class="details-item">
            <label class="label">{{ "非信创" }}</label>
            <span class="value">{{ addThousandsSeparator(overviewData[0]?.true_start_no) }}台</span>
          </div>
        </div>
        <img src="@/pages/cloudResources/icon/fxc.png"
             class="imgclass" />
      </div> -->
    </div>
    <!-- <div class="template-content"> -->
      <!-- <div :class="defaultValue == 1 ? 'template-item-n' : 'template-item-n-r'"> -->
        <!-- <div class="chart"> -->
          <!-- <VptPie :chartData="data"
                  autoRander
                  v-bind="pieProps"
                  titleText="缺陷总数"
                  :width="pieWidth"
                  :height="pieHeight"></VptPie> -->
          <!-- <echertsPie height="3.4rem"
                      v-if="data.length>0"
                      :pieDate="data"></echertsPie> -->
          <!-- <echertsPie height="3.4rem"
                      v-if="!pies"
                      :pieDate="pieDate2"></echertsPie> -->
        <!-- </div> -->
      <!-- </div> -->
    <!-- </div> -->
  </baseCard>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import VptPie from "@/components/echarts/vpt-pie/index.vue";
import { addThousandsSeparator } from "@/utils/formatter.js";
import echertsPie from "./echertsPie.vue";

const props = defineProps({
  height: { type: String, default: "" },
  overviewData: { type: Array, default: [] },
  pieData: { type: Array, default: [] },
  isLandscape: { type: Boolean, default: false },
  // 宽度
  pieWidth: { type: Number, default: 280 },
  // 高度
  pieHeight: { type: Number, default: 280 },
});

const defaultValue = ref(1);
const pies = ref(false);
const option = ref([
  { props: "app_sum", name: "应用总数", value: "12" },
  {
    props: "app_num_warning",
    name: "告警应用数",
    valueClass: "is-danger",
    value: "12",
  },
  {
    props: "app_num_info",
    name: "提示应用数",
    valueClass: "is-warn",
    value: "12",
  },
  {
    props: "app_num_normal",
    name: "正常运行应用数",
    valueClass: "is-success",
    value: "12",
  },
]);
const data = computed(() => {
  return props.pieData;
});
const pieDate1 = ref([
  {
    value: addThousandsSeparator("219"),
    name: "欧拉",
    percentage: "37.97%",
    itemStyle: {
      color: "#00B42A",
      borderWidth: 2,
    },
  },
  {
    value: addThousandsSeparator("24"),
    name: "麒麟",
    percentage: "4.13%",
    itemStyle: {
      color: "#1AC6FF",
      borderWidth: 2,
    },
  },
  {
    value: addThousandsSeparator("142"),
    name: "统信",
    percentage: "24.40%",
    itemStyle: {
      color: "#165DFF",
      borderWidth: 2,
    },
  },
  {
    value: addThousandsSeparator("122"),
    name: "红旗",
    percentage: "20.96%",
    itemStyle: {
      color: "#FF7D00",
      borderWidth: 2,
    },
  },
  {
    value: addThousandsSeparator("73"),
    name: "龙蜥",
    percentage: "12.54%",
    itemStyle: {
      color: "#FFC400",
      borderWidth: 2,
    },
  },
]);

const pieDate2 = ref([
  {
    num: "84",
    percentage: "16.41%",
    name: "麒麟",
    value: "84",
    itemStyle: {
      color: "#00B42A",
      borderWidth: 2,
    },
  },
  {
    num: "428",
    percentage: "83.59%",
    name: "欧拉",
    value: "428",
    itemStyle: {
      color: "#1AC6FF",
      borderWidth: 2,
    },
  },
]);

const pieProps = computed(() => {
  const otherProps = props.isLandscape ? getOtherPieProps() : {};

  return {
    center: ["50%", "35%"],
    radius: ["8%", "50%"],
    legendProps: {
      top: "15%",
      left: "45%",
      itemGap: 10,
    },
    titleProps: {
      left: "21%",
      top: "23%",
    },
    color: ["#EDC600", "#2175DB", "#57C5FF", "#00B675", "#EDC600"],
    // ...otherProps,
  };
});
onMounted(() => {
  // setTimeout(() => {
  //   pies.value = true;
  // }, 1500);
});
function changeTab(e) {
  defaultValue.value = e;
  pies.value = !pies.value;
}
</script>

<style lang="less" scoped>
.imgclass {
  width: 0.4rem;
  height: 0.4rem;
  margin-top: 0.25rem;
  margin-right: 0.2rem;
  display: block;
}

.chart {
  width: 100%;
  margin-left: -0.3rem;
  height: 1.48rem;

  .empty-div {
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.template-header {
  display: flex;

  .default-value {
    // background: #e6ebf5 !important;
    background-image: linear-gradient(180deg, #f2f7ff 0%, #fdfeff 100%);
  }

  .template-item {
    display: flex;
    width: 5.22rem;
    height: 0.88rem;
    // margin-top: 0.2rem;
    margin-right: 0.16rem;
    color: #fff;
    font-size: 0.16rem;
    background: url("../../../../assets/img/theme3/cloud_tem.png");
    background-size: 100% 100%;
    border-radius: 0.04rem;

    .value {
      margin-top: 0.1rem;
    }
  }

  // .template-item:first-child {
  //   cursor: pointer;
  // }
  .template-item:last-child {
    margin-right: 0;
  }
}

.template-content {
  .template-item-n {
    display: flex;
    width: 5.22rem;
    height: 3.2rem;
    margin-top: 0.1rem;
    color: #fff;
    font-size: 0.16rem;
    background: url("../../../../assets/img/bg/bg-1001.png") no-repeat;
    background-size: 100% 100%;
    // border: 1px solid #e6ebf5;
    border-radius: 4px 0 0 0 4px 4px 4px;
    border-radius: 4px 0 0 0 4px 4px 4px;
  }

  .template-item-n-r {
    display: flex;
    width: 5.22rem;
    height: 3.3rem;
    margin-top: 0.1rem;
    color: #fff;
    font-size: 0.16rem;
    background: url("../../icon/lengtwo.png") no-repeat;
    background-size: 100% 100%;
  }
}

.over-template-item-right {
  flex: 1;
  display: flex;

  // justify-content: space-around;
  // flex-direction:row-reverse;
  // justify-content: end;
  .details-item {
    width: 1rem;
    // max-width: 1.5rem;
    display: flex;
    flex-direction: column;
    padding-right: 0 0.08rem;
    padding: 0.2rem;

    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .label {
      color: #4e5969;
      font-size: 0.18rem;
    }

    .value {
      margin-top: 0.04rem;
      color: #1d2129;
      font-size: 0.2rem;
    }
  }
  .template-item-a {
    width: 1.54rem;
    height: 0.6rem;
    display: flex;
    flex-direction: column;
     margin-top: 0.14rem;
    margin-left: -0.32rem;
    background: #FFFFFF;
    border: 0.01rem solid #FFFFFF;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .label {
      margin-top: 0.1rem;
      margin-left: 0.12rem;
      color: #4e5969;
      font-size: 0.14rem;
    }
    .value {
      margin-left: 0.12rem;
      margin-top: 0.04rem;
      color: #4e5969;
      font-size: 0.18rem;
    }
  }
  .template-item-b {
    width: 1.54rem;
    height: 0.6rem;
    display: flex;
    flex-direction: column;
     margin-top: 0.14rem;
    margin-left: 0.16rem;
    background: #FFFFFF;
    border: 0.01rem solid #FFFFFF;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    .label {
      margin-top: 0.1rem;
      margin-left: 0.12rem;
      color: #4e5969;
      font-size: 0.14rem;
    }
    .value {
      margin-left: 0.12rem;
      margin-top: 0.04rem;
      color: #4e5969;
      font-size: 0.18rem;
    }
  }
  .details-item:last-child {
    padding-right: 0;
  }
}
</style>
